<template>
  <div>
      <template v-if="activePageId==pageTypeList.gllz.id">
        <highway-info title="公路运政"  v-if="activePageId==pageTypeList.gllz.id" :cartypelist="data.cartypelist" :ref="pageTypeList.gllz.id" />
      </template>
      <template v-else-if="activePageId==pageTypeList.dlyz.id">
        <roadpolic title="道路运政" :carlist="data.cartypelist" :ref="pageTypeList.dlyz.id" />
      </template>
      <template v-else-if="activePageId==pageTypeList.slyz.id||pageTypeList.hdyz.id||pageTypeList.gkyz.id||pageTypeList.hsyz.id">
        <searoad title="水路运政" :shiplist="data.cartypelist" :ref="pageTypeList.slyz.id" />
      </template>
      <template v-else>
        <other title="其他" :shiplist="data.cartypelist" :ref="detail.zfml" />
      </template>
  </div>
</template>
<script>
import dictCache from "@/assets/utils/cache-dict-util";
import FormBtns from "@/views/comps/zhzf/form-btns";
import highwayInfo from "./highway";
import roadpolic from "./roadpolic";
import searoad from "./searoad";
import other from "./other";
import { mapActions } from "vuex";
export default {
  props: ["cartypelist"],
  components: { FormBtns, highwayInfo, roadpolic, searoad, other },
  data() {
    return {
      labelPosition: "right",
      activePageId: "",
      pageTypeList: {
        dlyz: { id: "1002000200000000", name: "道路运政" },
        gkyz: { id: "1002000500000000", name: "港口行政" },
        gczl: { id: "1002000600000000", name: "工程质量安全监督" },
        gllz: { id: "1002000100000000", name: "公路路政" },
        hsyz: { id: "1002000700000000", name: "海事行政" },
        hdyz: { id: "1002000400000000", name: "航道行政" },
        qt: { id: "1002000800000000", name: "其他" },
        slyz: { id: "1002000300000000", name: "水路运政" }
      },
      from: {},
      highwayfrom: false,
      roadpolicfrom: false,
      searoadfrom: false,
      otherfrom: false,
      data: {
        cartypelist: [],
        shiplist: []
      }
    };
  },
  mounted() {
    //   this.initPage();
  },
  methods: {
    ...mapActions("d2admin/page", ["close"]),
    initPage(detail, distData) {
      this.from = detail;
      this.setInitData();
      this.data.cartypelist = distData.cartypelist; //车辆种类
      this.activePageId = detail.zfml;
      this.$nextTick(()=>{
        let dom = this.$refs[this.activePageId];
        if(!dom){
          dom = this.$refs[this.from.zfml];
        }
        if(dom){
        dom.initPage(detail);  
        }
      })
    },
    infoshow(detail) {
      let zfml = dictCache.getDataInfo("0055", detail.zfml);
      if (zfml.id == "1002000200000000") {
        this.searoadfrom = false;
        this.roadpolicfrom = false;
        this.otherfrom = false;
        this.highwayfrom = true;
      } else if (zfml.id == "1002000100000000") {
        this.searoadfrom = false;
        this.highwayfrom = false;
        this.otherfrom = false;
        this.roadpolicfrom = true;
      } else if (
        zfml.id == "1002000700000000" ||
        zfml.id == "1002000300000000" ||
        zfml.id == "1002000400000000" ||
        zfml.id == "1002000500000000"
      ) {
        this.highwayfrom = false;
        this.roadpolicfrom = false;
        this.otherfrom = false;
        this.searoadfrom = true;
      } else if (zfml.id == "1002000800000000") {
        this.searoadfrom = false;
        this.roadpolicfrom = false;
        this.highwayfrom = false;
        this.otherfrom = true;
      }
      // switch(zfml.id){
      //   case '1002000200000000':
      //   this.searoadfrom = false;
      //   this.roadpolicfrom = false;
      //   this.highwayfrom = true;
      //   break;
      //   case '1002000100000000':
      //   this.searoadfrom = false;
      //   this.highwayfrom = false;
      //   this.roadpolicfrom = true;
      //   break;
      //   case '1002000300000000':
      //   this.highwayfrom = false;
      //   this.roadpolicfrom = false;
      //   this.searoadfrom = true;
      //   break;
      // }
    },
    setInitData() {
      if (!this.from.cartype) {
        this.from.cartype = Object.values(this.cartypelist)[0].name;
      }
    }
  }
};
</script>
<style lang="scss">
  .baseform {
    padding: 0px 20%;
  }

  .el-date-editor {
    .el-input__suffix {
      display: none;
    }
  }
</style>
